<template>
  <div class="rebate-textarea ask-leave-info">
    <group class="none-bottom-border">
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="4">
            合作公司名称<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value input-box" :span="8">
            <input type="text" v-model="companyName" placeholder="請輸入公司名稱">
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="4">
            客人名称<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value input-box" :span="8">
            <input type="text" v-model="guestName" placeholder="請輸入客人名稱">
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="4">
            成交地址<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value input-box" :span="8">
            <input type="text" v-model="transactionAddress" placeholder="請輸入成交地址">
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item apply-reason-row" v-if="reApplyReasonShow">
        <flexbox>
          <flexbox-item class="title" :span="4">
            重新申请原因<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value" :span="8">
            <x-textarea class="apply-reason" v-model="reApplyReason" :placeholder="'請輸入請假理由'"></x-textarea>
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item">
        <flexbox class="select-images-list" wrap="wrap">
          <flexbox-item v-for="(item, index) in imagesList" :key="index">
            <i class="remove-icon" @click="removePerson(index)"></i>
            <div class="img-box">
              <img :src="item" @click="ImagesShow(index)">
            </div>
          </flexbox-item>
          <flexbox-item class="select-img" v-show="imagesList.length < 9">
            <input type="file" @change="getFileUrl()" ref="inputDOM" multiple accept="image/*">
          </flexbox-item>
        </flexbox>
        <toast v-model="toastShow" :text="toastText" type="text" class="toast-normal" :time="3000"></toast>
        <!-- 圖片放大 -->
        <previewer :list="previewerImagesList" ref="previewer"></previewer>
      </cell-box>
    </group>
      <!--    <x-textarea v-model="reasonText" :placeholder="'詳細填寫合作申請，有助於更快完成申請哦！(必填)'" :show-counter="true" :max="500"></x-textarea>-->
  </div>
</template>

<script>
  import { Group, CellBox, Previewer, TransferDom, Flexbox, FlexboxItem, Toast, XTextarea } from 'vux';
  import { Queue } from '@/assets/js/classLibrary.js';
  import qs from 'qs';
  export default {
    name: 'RebateTextarea',
    data () {
      return {
        companyName: '',        // 合作公司名稱 【提交】
        guestName: '',          // 客人名稱 【提交】
        transactionAddress: '',  // 成交地址 【提交】
        imagesList: [],         // 用於顯示的圖片數組 【提交】
        imagesUploadList: [],   // 用於上傳的圖片數組，不包含'data:image/jpeg;base64'的開頭
        previewerImagesList: [], // Previewer組件所需格式
        // reasonText: '',         // 申請理由
        toastShow: false,       // 是否顯示提示框
        toastText: '',          // 提示框文字
        uploadQueue: new Queue(),
        reApplyReasonShow: false,
        reApplyReason: ''
      };
    },
    components: {
      Group,
      CellBox,
      Previewer,
      TransferDom,
      Flexbox,
      FlexboxItem,
      Toast,
      XTextarea
    },
    mounted () {
    },
    methods: {
      getFileUrl: function (e) {
        // input file element
        let inputEl = this.$refs.inputDOM;
        let filesArr = inputEl.files;
        let oldFileLength = this.imagesList.length;
        let newFileLength = inputEl.files.length + oldFileLength;
        // 限制圖片數量
        if (newFileLength > 9) {
          this.toastShow = true;
          this.toastText = '你只能上傳9張圖片';
          return false;
        }
        // 遍歷讀取圖片
        for (let i = 0; i < filesArr.length; i++) {
          // 限制圖片大小
          // let size = filesArr[i].size / 1024;
          // if (size > 2 * 1024) {
          //   this.toastShow = true;
          //   this.toastText = '單張圖片大小不能超過2M';
          //   return false;
          // }
          let reader = new FileReader();
          let _this = this;
          reader.onload = function () {
            let result = reader.result;
            let base64Header = result.slice(0, result.indexOf(',') + 1);
            let base64UploadUrl = result.replace(base64Header, '');
            if (!_this.isImageFormat(base64Header)) {
              alert('只允許上傳圖片格式文件');
              return false;
            }
            _this.imagesUploadList.push(base64UploadUrl);
            _this.uploadQueue.enqueue(base64UploadUrl);
            // 全部加入隊列后執行上傳
            if (i === filesArr.length - 1) {
              _this.$parent.loadingShow = true;
              _this.uploadFile();
              inputEl.value = '';
            }
          };
          reader.readAsDataURL(filesArr[i]);
        }
      },
      uploadFile: function () {
        this.$parent.loadingShow = true;
        if (!this.uploadQueue.empty()) {
          let postData = {
            data: {
              Image: this.uploadQueue.getFirst()
            }
          };
          this.axios.post('/Process/CreateImages', qs.stringify(postData))
          .then((res) => {
            this.$parent.loadingShow = false;
            if (res.data.IsSuccess) {
              this.imagesList.push(res.data.data.ImagePath);
              this.previewerImagesList.push({src: res.data.data.ImagePath});
              this.uploadQueue.dequeue();
              this.uploadFile();
            } else {
              this.toastShow = true;
              this.toastText = `上傳圖片時發生錯誤，錯誤信息：${res.data.ExMessage}`;
              this.imagesUploadList = [];
              this.uploadQueue.clear();
            }
            console.log('上傳請求結束');
          })
          .catch((err) => {
            this.$parent.loadingShow = false;
            this.toastShow = true;
            this.toastText = `上傳圖片時發生錯誤，錯誤信息：${err}`;
            this.imagesUploadList = [];
            this.uploadQueue.clear();
          });
        } else {
          this.$parent.loadingShow = false;
        }
      },
      ImagesShow: function (index) {
        this.$refs.previewer.show(index);
      },
      removePerson: function (index) {
        this.imagesList.splice(index, 1);
        this.imagesUploadList.splice(index, 1);
        this.previewerImagesList.splice(index, 1);
      },
      isImageFormat: function (url) {
        if (url.indexOf('image') === -1) {
          return false;
        }
        return true;
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';

  #app .rebate-textarea .select-images-list{
    padding: getRem(48) 0 0;
    .vux-flexbox-item{
      margin-bottom: getRem(48);
    }
  }
  .rebate-textarea{
    background: #fff;
    /*padding-left: 15px;*/
    /*padding-bottom: 5px;*/
    .vux-x-textarea{
      padding-left: 0;
    }
  }
  .cellbox-item {
    padding: 0 15px;
    &:before {
      border-color: #e6e6e6;
    }
    &:first-child{
      input{
        margin-top: 1px;
      }
    }
    .title {
      color: #666;
      font-size: getRem(28);
      padding: getRem(32) 0;
    }
    .value {
      font-size: getRem(28);
    }
    .input-box{
      input{
        display: block;
        width: calc(100% - 15px);
        border: 0;
        padding: getRem(32) 0;
        line-height: getRem(38);
        // line-height: getRem(102);
        font-size: getRem(28);
        outline: none;
        &::placeholder{
          color: #ddd;
        }
      }
    }
  }
  .apply-reason-row{
    .title{
      align-self: flex-start;
    }
    .value{
      padding: 0.8rem 0;
    }
    .apply-reason{
      padding: 0;
      textarea {
        width: calc(100% - 15px);
      }
    }
  }
</style>
